<div class="main-container">
    <form class="layui-form" action="" method="post" id="user-edit-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">{:trans('Username',[],'user')}</label>
            <div class="layui-input-block">
                <input type="text" name="username" required lay-verify="required" autocomplete="off"
                       placeholder="{:trans('Please enter', ['%s%' => trans('Username',[],'user')])}"
                       class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">{:trans('Nickname',[],'user')}</label>
            <div class="layui-input-block">
                <input type="text" name="nickname" required lay-verify="required" autocomplete="off"
                       placeholder="{:trans('Please enter', ['%s%' => trans('Nickname',[],'user')])}"
                       class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">{:trans('Password',[],'user')}</label>
            <div class="layui-input-block">
                <input type="password" name="password" autocomplete="off" lay-verify="pwd"
                       placeholder="{:trans('Do not update password, please leave blank',[],'admin')}"
                       class="layui-input" value="">
                <tip>
                    {:trans('Composed of letters, numbers, special characters, any two types, 6-15 digits',[],'admin')}
                </tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:trans('Sex',[],'user')}</label>
            <div class="layui-input-inline">
                <select name="sex" id="sex">
                    <option value="1">{:trans('Man')}</option>
                    <option value="2">{:trans('Woman')}</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:trans('Avatar',[],'user')}</label>
            <div class="layui-input-block user-add-mode config_mode_image huicmf-upload">
                <div class="layui-input-block-flex">
                    <input type="text" name="avatar" id="user-edit-image-select-input" autocomplete="off"
                           class="layui-input" onmouseover="hui_img_preview('upload_pic_user_add',this.value)"
                           onmouseleave="layer.tips();">
                    <button type="button" class="layui-btn layui-btn-normal layUpload"
                            data-multiple="false" data-input-id="user-edit-image-select-input"
                            id="upload_pic_user_add"
                            data-preview-id="user-add-image" data-type="image">
                        <i class="layui-icon"></i>{:trans('Upload image')}
                    </button>
                    <button type="button" class="layui-btn" style="margin-left:10px;"
                            data-open-pic="/app/admin/upload/choose?type=one&select_id=user-edit-image-select-input">
                        <i class="layui-icon"></i>{:trans('Choose image')}
                    </button>
                </div>
                <div>
                    <div id="user-edit-image-select-input_box" class="upload_pic_box"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:trans('Email',[],'user')}</label>
            <div class="layui-input-block">
                <input type="email" name="email" autocomplete="off" lay-verify="email"
                       placeholder="{:trans('Please enter', ['%s%' => trans('Email',[],'user')])}" class="layui-input"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:trans('Mobile',[],'user')}</label>
            <div class="layui-input-block">
                <input type="text" name="mobile" autocomplete="off" lay-verify="phone"
                       placeholder="{:trans('Please enter', ['%s%' => trans('Mobile',[],'user')])}" class="layui-input"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:trans('Level',[],'user')}</label>
            <div class="layui-input-block">
                <input type="number" name="level" autocomplete="off"
                       placeholder="{:trans('Please enter', ['%s%' => trans('Level',[],'user')])}" class="layui-input"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:trans('Birthday',[],'user')}</label>
            <div class="layui-input-block">
                <input type="text" name="birthday" autocomplete="off" id="user_edit_birthday" class="layui-input"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:trans('Score',[],'user')}</label>
            <div class="layui-input-block">
                <input type="number" name="score" autocomplete="off"
                       placeholder="{:trans('Please enter', ['%s%' => trans('Score',[],'user')])}" class="layui-input"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:trans('LastTime',[],'user')}</label>
            <div class="layui-input-block">
                <input type="text" name="last_time" autocomplete="off" id="user_edit_last_time" class="layui-input"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:trans('LastIp',[],'user')}</label>
            <div class="layui-input-block">
                <input type="text" name="last_ip" autocomplete="off" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:trans('JoinTime',[],'user')}</label>
            <div class="layui-input-block">
                <input type="text" name="join_time" autocomplete="off" id="user_edit_join_time" class="layui-input"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:trans('JoinIp',[],'user')}</label>
            <div class="layui-input-block">
                <input type="text" name="join_ip" autocomplete="off" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:trans('Status')}</label>
            <div class="layui-input-block">
                <input type="checkbox" id="user-status" lay-filter="user-status" lay-skin="switch"/>
                <input type="text" id="user-status2" style="display:none" name="status" value="0"/>
            </div>
        </div>
        <input type="hidden" id="id" name="id" value="">
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="layui-btn layui-btn-sm" lay-submit=""
                        lay-filter="data-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    {:trans('Save')}
                </button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    {:trans('Reset')}
                </button>
            </div>
        </div>
    </form>
</div>
<script>
  layui.use(["form", "laydate", "upload_hui", "util"], function () {
    let PRIMARY_KEY = "id";
    let PRIMARY_KEY_VALUE = "{:request()->get('id')}";

    var $ = layui.$;
    var form = layui.form;
    var laydate = layui.laydate;
    var upload_hui = layui.upload_hui;
    upload_hui.render();
    form.render();
    //自定义密码表单验证
    form.verify({
      pwd: function (value, elem) {
        if (value.length > 0) {
          if (!/^[^\u4e00-\u9fa5]*$/.test(value)) {
            return "{:trans('Password cannot appear in Chinese',[],'admin')}";
          }
          if (!/^(?![a-zA-Z]+$)(?!\d+$)(?![^\da-zA-Z\s]+$).{6,15}$/.test(value)) {
            return "{:trans('Composed of letters, numbers, special characters, any two types, 6-15 digits',[],'admin')}";
          }
        }
      }
    });
    // 字段 生日 join_time
    laydate.render({
      elem: "#user_edit_birthday",
      type: "date",
    });
    // 字段 注册时间 join_time
    laydate.render({
      elem: "#user_edit_join_time",
      type: "datetime",
    });
    // 字段 登录时间 last_time
    laydate.render({
      elem: "#user_edit_last_time",
      type: "datetime",
    });

    layui.$.ajax({
      url: "/app/admin/user/select?" + PRIMARY_KEY + "=" + PRIMARY_KEY_VALUE,
      dataType: "json",
      success: function (res) {
        // 给表单初始化数据
        layui.each(res.data[0], function (key, value) {
          var $targetForm = $('#user-edit-form');
          let obj = $targetForm.find('*[name="' + key + '"]');
          if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
          if (obj[0].nodeName.toLowerCase() === "textarea") {
            obj.val(layui.util.escape(value));
          } else {
            obj.attr("value", value);
          }
          if (key === 'sex') {
            $("#sex").val(value);
            form.render("select");
          }
          if(key==='avatar'){
            if (value.trim().length > 0) {
              let str = '';
              str += '<dl>\n' +
                '    <dt><img src="' + value + '" data-url="' + value + '" onclick="bigMapImg(\'#user-edit-image-select-input_box\')"></dt>\n' +
                '    <dd>删除</dd>\n' +
                '</dl>';
              $('#user-edit-image-select-input_box').html(str);
            }

          }
          if (key === 'status') {
            layui.$("#user-status").attr("checked", value != 0);
            layui.form.render();
            layui.form.on("switch(user-status)", function (data) {
              layui.$('input[name="status"]').val(this.checked ? 1 : 0);
            });
          }
        });
      }
    })

    //表单提交
    layui.form.on("submit(data-save)", function (data) {
      layui.$.ajax({
        url: '/app/admin/user/edit',
        type: "POST",
        dateType: "json",
        data: data.field,
        success: function (res) {
          if (res.code !== 200) {
            return hui_toast('error', res.msg);
          }
          return hui_toast('success', res.msg, function () {
            //刷新数据表格
            if (parent.hasOwnProperty('refreshTable')) {
              refreshTable('userTable', 1);
              layer.closeAll('page');
            }
          });
        }
      });
      return false;
    });

  });
</script>
